<template>
  <div class="page-container fixed-bottom">
    <Steps :step="step" />
    <Step1 v-show="step === 1" ref="step1" :type="type" :form-detail="detail" />
    <Step2 v-show="step === 2" ref="step2" :form-detail="detail" />
    <Step3 v-show="step === 3" :status="-1" @cancel="cancelHandle" />
    <div v-if="step === 1 || step === 2" class="bottom-handle-box">
      <el-button @click="goApprove">查看审核进度</el-button>
      <el-button type="primary" @click="saveHandle(true)">保存草稿</el-button>
      <el-button v-if="step === 1" type="primary" @click="nextHandle">下一步</el-button>
      <el-button v-if="step === 2" type="primary" @click="beforeHandle">上一步</el-button>
      <el-button v-if="step === 2" type="primary" @click="saveHandle(false)">发布</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Steps from './Steps.vue'
import Step1 from './Step1.vue'
import Step2 from './Step2.vue'
import Step3 from '@/views/shop/creatProduct/common/Step3.vue'
import { createProduct, getProductDetail, getProductDraft } from '@/api/product'
import { rollProductBack } from '@/api/common'
export default {
  name: 'Product',
  components: {
    Steps,
    Step1,
    Step2,
    Step3
  },
  props: {
    type: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapGetters([
      'currentEnterprise',
      'currentSite'
    ])
  },
  data() {
    return {
      id: '',
      step: 1,
      detail: {}
    }
  },
  created() {
    const { id, type } = this.$route.query
    // 有id 查询详情，没有id查询草稿
    if (id && this.type === Number(type)) {
      this.id = id
      this.getDetail()
    } else {
      this.getDraft()
    }
  },

  methods: {

    // 查询详情
    getDetail() {
      const data = {
        id: this.id
      }
      getProductDetail(data).then(res => {
        this.detail = res
      }).catch(() => {})
    },

    // 查询草稿
    getDraft() {
      const data = {
        siteId: this.currentSite.id,
        type: this.type
      }
      getProductDraft(data).then(res => {
        const { id } = res
        if (id) {
          this.id = id
          this.detail = res
        }
      }).catch(() => {})
    },

    // 查看审核进度
    goApprove() {
      this.$router.push({
        path: '/shop/creatProduct/approve',
        query: {
          pageType: 'scenic'
        }
      })
    },

    // 上一步
    beforeHandle() {
      this.step = this.step - 1
    },

    // 下一步
    async nextHandle() {
      await this.$refs.step1.$refs.form.validate()
      await this.createProduct(true, true)
    },

    // 撤销发布
    cancelHandle() {
      const data = {
        productId: this.id
      }
      this.$confirm('确定要撤销发布吗?', '提示', {
        type: 'warning'
      }).then(() => {
        rollProductBack(data).then(() => {
          this.$message.success('撤销发布成功')
          this.step = 1
          this.getDetail()
        }).catch(() => {})
      }).catch(() => {})
    },

    // 创建产品
    createProduct(draft, next) {
      const { isTimePhased, timeRules, reserveDate } = this.$refs.step2.form
      const [startDate, endDate] = reserveDate
      let productDateRuleCreateVOS = []
      if (isTimePhased === 0) {
        const { costPrice, retailPrice, doorMarketPrice, dailyInventory } = timeRules[0]
        const tempObj = {
          costPrice,
          retailPrice,
          doorMarketPrice,
          dailyInventory
        }
        productDateRuleCreateVOS = [{
          data: reserveDate,
          startDate,
          endDate,
          shopProductTimeRuleBaseVOS: [tempObj]
        }]
      } else if (isTimePhased === 1) {
        productDateRuleCreateVOS = [{
          data: reserveDate,
          startDate,
          endDate,
          shopProductTimeRuleBaseVOS: timeRules
        }]
      }
      const data = {
        ...this.$refs.step1.form,
        ...this.$refs.step2.form,
        productDateRuleCreateVOS,
        draft,
        approveType: 2, // 产品审核
        type: this.type,
        productType: this.currentSite.productType,
        siteId: this.currentSite.id,
        shopId: this.currentSite.shopId,
        id: this.id
      }
      console.log(data)
      createProduct(data).then(res => {
        this.id = res
        if (draft && !next) {
          this.$message.success('保存草稿成功')
        } else if (!draft) {
          this.$message.success('发布成功')
          this.step = this.step + 1
        } else if (next) {
          this.step = this.step + 1
        }
      }).catch(() => {})
    },

    // 保存
    async saveHandle(draft) {
      if (!draft) {
        if (this.step === 1) {
          await this.$refs.step1.$refs.form.validate()
        }
        if (this.step === 2) {
          await this.$refs.step2.$refs.form.validate()
        }
      }
      this.createProduct(draft)
    }

  }
}
</script>

<style lang="scss" scoped></style>
